<template>
	<view class="pages">
		<view class="pages-option">
			<view class="pages-user">
				<view class="pages-user__info">
					<image 
						class="pages-user__info-image"
						:src="userinfo.avatar || '../../static/avatar.jpeg'" 
						mode="aspectFit"
					></image>
					<view class="pages-user__info-font">
						<view class="pages-user__info-font-big">
							{{userinfo.nickName || userinfo.userName || userinfo.phonenumber}}
						</view>
						<view class="">
							{{roleName || '--'}}
						</view>
					</view>
				</view>
				
				<view class="pages-user__button">
					<up-button shape="circle" plain @click="onSelectOrg">
						<text style="margin-right: 20rpx;">切换组织</text>
						<up-icon name="arrow-down"></up-icon>
					</up-button>
					<up-badge
						max="999" 
						:value="99"
						shape="horn"
						absolute
						:offset="[-5, 0]"
					></up-badge> 
				</view>
			</view>
			<view class="pages-buttons">
				<view 
					class="pages-item"
					v-for="item of buttons"
					:key="item.name"
					@click="onSkipRouter(item)"
				>
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<view class="pages-statistics">
			<view class="pages-task-person" style="background-image: url(http://101.33.235.253:9300/statics/2024/09/10/1_20240910065619A002.png);">
				<view class="pages-task-title">
					个人任务
				</view>
				
				<view class="pages-statistics-item">
					<qiun-data-charts
						type="ring"
						:opts="onGetOption('核查任务', 12)"
						:chartData="onGetChartData(temp[0], temp[1])"
						:canvas2d='true'
					/>
				</view>
				
				<view class="pages-statistics-item">
					<qiun-data-charts
						type="ring"
						:opts="onGetOption('处置任务', 3, true)"
						:chartData="onGetChartData(temp[2], temp[3])"
						:canvas2d='true'
					/>
				</view>
			</view>
			
			<view class="pages-task-person" style="background-image: url(http://101.33.235.253:9300/statics/2024/09/10/1_20240910065619A002.png);">
				<view class="pages-task-title">
					部门统计
				</view>
				
				<view class="pages-statistics-item">
					<qiun-data-charts
						type="ring"
						:opts="onGetOption('核查任务', 33)"
						:chartData="onGetChartData(temp[4], temp[5])"
						:canvas2d='true'
					/>
				</view>
				
				<view class="pages-statistics-item">
					<qiun-data-charts
						type="ring"
						:opts="onGetOption('处置任务', 6, true)"
						:chartData="onGetChartData(temp[6], temp[7])"
						:canvas2d='true'
					/>
				</view>
			</view>
		</view>
		
		<SelectOrg ref="selectOrgRef" @onOrgChange="onSetRoleName" />
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { onGetUserInfo, onGetUserRoles } from "/serves/api.js";
import { onHasUserinfoData, onSetUserinfoData, onGetUserinfoData, onGetRoleIdData,  onSetRoleIdData, onSetRolesData, onGetRolesData } from "/common/userinfo.js"
import SelectOrg from '../../componses/select-org/index.vue'

const userinfo = ref({})
const roleName = ref('')

const selectOrgRef = ref(null)

const temp = ref([12, 2, 33, 4, 5, 8, 9, 12])

const buttons = ref([
	{ icon: '../../static/1.jpeg', name: '任务大厅', path: '/pages/task/index' },
	{ icon: '../../static/2.jpeg', name: '事件上报', path: '/pages/task/index', allow: 'no' },
	{ icon: '../../static/3.jpeg', name: '组织机构', path: '/pages/task/index', allow: 'no'  },
	{ icon: '../../static/4.jpeg', name: '排行榜', path: '/pages/task/index', allow: 'no'  },
	{ icon: '../../static/5.jpeg', name: '台账明细', path: '/pages/task/index', allow: 'no'  },
])

const onSelectOrg = function () {
	selectOrgRef.value.onShowPopup()
}

const onSkipRouter = function (item) {
	if (item.allow === 'no' ) {
		uni.showToast({
			title: '暂未开放！',
			icon: 'none'
		})
		return
	}
	
	uni.navigateTo({ url: item.path })
}

const onWxGetUserInfo = async function () {
	try {
		const response = await onGetUserInfo()
		await onSetUserinfoData(response.user)
		userinfo.value = await onGetUserinfoData()
		const userId = userinfo.value.userId
		
		const rolesRes = await onGetUserRoles(userId)
		const roles = rolesRes.roles.map(v => v.flag)
		await onSetRolesData(rolesRes.roles)
		
		if (!await onGetRoleIdData()) {
			await onSetRoleIdData(roles[0].roleId)
		}
		
		onSetRoleName()
	} catch (e) {
		console.log(e)
		uni.showToast({ title: '服务异常，请刷新重试！', icon: 'none' })
	}
};

const onGetChartData = (data1, data2) => {
	return {
	  series: [
	    {
			data: [
				{ name: "已完成", value: data1 },
				{ name: "未完成", value: data2 },
			],
		},
	  ],
	}
}

const onGetOption = (name, subname, legend = false) => {
	return {
		rotate: false,
		rotateLock: false,
		color: [
			"#44A4FF",
			"#E6F0FF",
		],
		title: {
			name: name,
			fontSize: 12,
			color: "#1B2361",
			offsetY: legend ? 65 : 80,
		},
		legend: {
			show: legend,
			position: "top",
			lineHeight: 12
		},
		subtitle: { offsetY: -6, name: `已完成:${subname}`, fontSize: 12, color: '#44A4FF' }, 
		padding: [0, 0, 10, 0],
		dataLabel: false,
		enableScroll: false,
		extra: {
			ring: {
				ringWidth: 15,
				activeOpacity: 0.3,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 0,
				border: false,
				borderWidth: 1,
				borderColor: "#FFFFFF",
			},
		},
	}
}

const onSetRoleName = async function () {
	// TODO
	temp.value.filter((v, i) => { temp.value[i] = Math.floor(Math.random() * 100) + 1; })
	
	const roles  = await onGetRolesData()
	const id = await onGetRoleIdData()
	if(roles?.length){
		roles.map(v => { if(v.roleId === id) roleName.value = v.roleName })
	}
}

onLoad(() => onWxGetUserInfo())
onShow(() => onSetRoleName())


const togoTaskHall = () => {
  uni.redirectTo({
    url: "/pages/checkTask/index",
  });
};


// onMounted(() => onWxGetUserInfo())
</script>

<style scoped lang="scss">
.pages-option {
	width: 100%;
	height: 700rpx;
	box-sizing: border-box;
	padding: 30rpx;
	background-image: linear-gradient(180deg, #2E90EC 0%, #F2F2F2 90%);
}

.pages-user {
	width: 100%;
	height: 110rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	&__info {
		display: inline-flex;
		align-items: center;
		width: auto;
		height: 100%;
		
		&-image {
			width: 110rpx;
			height: 110rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 21rpx 0px rgba(21,105,184,0.25);
			border-radius: 50%;
			margin-right: 30rpx;
		}
		
		&-font {
			display: inline-flex;
			flex-direction: column;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			
			&-big {
				font-size: 38rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	
	&__button {
		position: relative;
	}
}

.pages-buttons {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-top: 40rpx;
	background: #FFFFFF;
	box-shadow: 0px 10px 25px 0px rgba(84,164,239,0.25);
	border-radius: 30rpx;
	padding: 48rpx 30rpx;
}

.pages-item {
	width: 25%;
	height: auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	& image {
		width: 90rpx;
		height: 90rpx;
		background-color: #fff;
		transition: all 0.15s;
	}
	
	& text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 2em;
	}
	
	&:active {
		& image {
			transform: scale(1.1);
		}
		
		& text {
			color: #2E90EC;
		}
	}
}

.pages-statistics {
	position: relative;
	top: -140rpx;
	box-sizing: border-box;
	padding: 30rpx;
}

.pages-task-title {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 30rpx;
	color: #333333;
}

.pages-task-person {
	width: 100%;
	height: 400rpx;
	box-sizing: border-box;
	padding: 15rpx 30rpx;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 30rpx;
}

.pages-statistics-item {
	display: inline-block;
	width: 50%;
	height: 320rpx;
	box-sizing: border-box;
}
</style>